<?php
/*
Plugin Name: Phone
Plugin URI: http://getlilina.org/
Description: THEN WHO WAS PHONE?!
Author: Ryan McCue
Version: 1.0
Min Version: 1.0
Author URI: http://ryanmccue.info
License: GPL
*/

class Phone {
	public static function dispatch() {
?>
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Lilina</title>
        <style type="text/css" media="screen">@import "<?php echo get_option('baseurl') ?>content/plugins/phone/jqtouch/jqtouch.css";</style>
        <style type="text/css" media="screen">@import "<?php echo get_option('baseurl') ?>content/plugins/phone/themes/apple/theme.css";</style>
		<script type="text/javascript" src="<?php echo get_option('baseurl') ?>inc/js/jquery.js"></script>
		<script type="text/javascript" src="<?php echo get_option('baseurl') ?>inc/js/api.js"></script>
        <script type="text/javascript" src="<?php echo get_option('baseurl') ?>content/plugins/phone/jqtouch/jqtouch.js"></script>
        <script type="text/javascript" src="<?php echo get_option('baseurl') ?>content/plugins/phone/js/date.extensions.js"></script>
        <script type="text/javascript" src="<?php echo get_option('baseurl') ?>content/plugins/phone/js/to_relative_time.jquery.js"></script>
        <script type="text/javascript" charset="utf-8">
            var jQT = $.jQTouch({
                icon: '<?php echo get_option('baseurl') ?>content/plugins/phone/icon.png',
                addGlossToIcon: false,
                startupScreen: '<?php echo get_option('baseurl') ?>content/plugins/phone/startup.png'
            });
            // Some sample Javascript functions:
            $(function(){
				$('#load-more').tap(function () {
					$('#load-more').text('loaded');
				});
				LilinaAPI.call('feeds.getList', {}, Phone.populateFeedList);
				// We'll fix this hardcoded limit later.
				LilinaAPI.call('items.getList', {"limit": 10}, Phone.populateItemList);
            });
			String.prototype.shorten = function(length) {
				if (this.length > length) {
					var shorterLength = length - 4;
					return this.substr(0, shorterLength) + "...";
				} else {
					return String(this);
				}
			};
			Object.size = function(obj) {
				var size = 0, key;
				for (key in obj) {
					if (obj.hasOwnProperty(key)) size++;
				}
				return size;
			};

			Phone = {};
			Phone.feeds = {};
			Phone.populateFeedList = function (list) {
				$('#feeds-list').empty();

				Phone.feeds = list;
				$('#feeds-link .counter').text(Object.size(Phone.feeds));
				$.each(list, function (index, item) {
					var li = $('<li><a href="#" /></li>');
					var a = $('a', li);
					var span = $('<span />');

					a.data('feed-id', item.id);
					a.text( item.name.shorten(25) ).attr('title', item.name);
					$('#feeds-list').append(li);
				});
			};
			Phone.populateItemList = function (list) {
				Phone.items = list;
				$('#items-list').empty();

				$.each(list, function (id, item) {
					var li = $('<li class="arrow"><a href="#item-view"><span class="item-source" /> <span class="item-title" /> <span class="item-date" /></a></li>');
					var a = $('a', li);

					a.data('item-id', id).bind('click', function () {
						Phone.populateItemView(Phone.items[$(this).data('item-id')]);
					}).bind('tap', function () {
						Phone.populateItemView(Phone.items[$(this).data('item-id')]);
					});
					$('.item-title', li).html(item.title);

					if(item.feed_id != undefined)
						var feed = Phone.feeds[item.feed_id];
					else
						var feed = {"name": "(No name)", "url": "http://getlilina.org/"};

					$('.item-source', li).html(feed.name);

					var date = new Date(item.timestamp * 1000);
					$('.item-date', li).text(date.toUTCString());

					$('#items-list').append(li);
				});
				$('#items-list .item-date').toRelativeTime();
				$('#items-list a').click(function (){
					Phone.populateItemView(Phone.items[$(this).data('item-id')]);
				});
			};
			Phone.populateItemView = function (item) {
				$('#item-details').empty();
				var basics = $('<ul class="rounded"><li class="item-source">From: <a target="_blank" /></li><li class="item-title"><a target="_blank" /></li> <li class="item-date"><abbr /></li><li class="item-content" /></div>');

				if(item.feed_id != undefined)
					var feed = Phone.feeds[item.feed_id];
				else
					var feed = {"name": "(No name)", "url": "http://getlilina.org/"};

				var date = new Date(item.timestamp * 1000);

				$('.item-title a', basics).html(item.title).attr('href', item.permalink);
				$('.item-source a', basics).html(feed.name).attr('href', feed.url);
				$('.item-date abbr', basics).text(date.toUTCString()).attr('title', date.toUTCString()).toRelativeTime();
				$('.item-content', basics).html(item.content);
				
				$('.item-content a', basics).each(function () {
					$(this).attr('target', '_blank');
				});

				if(item.actions != undefined && item.actions.length > 0) {
					$(basics).append('<div class="footer"><ul></ul></div>');
					$.each(item.actions, function (index, action) {
						var li = $('<li></li>').html(action);
						$('.footer ul', basics).append(li);
					});
				}

				$('#item-details').html(basics);
			};
        </script>
		<style>
            #items-list li a .item-date, #items-list li a .item-title {
                display: block;
                color: #999;
                font-size: 12px;
                font-weight: normal;
            }
            #items-list li a .item-title {
                color: #333;
                font-size: 14px;
            }
			#items-list .item-title {
				font-weight: normal;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				width: 100%;
				display: block;
				padding-right: 5px;
			}

			#item-details li {
				border-top: none !important;
				border-bottom: 1px solid #ccc;
				font-weight: normal;
			}
			#item-details .item-source a {
				display: inline;
			}
			#item-details .item-title {
				border-bottom: none;
				padding-bottom: 0;
				padding-top: 5px;
				font-size: 18px;
			}
				#item
			#item-details .item-date {
				padding-top: 0;
				font-size: 14px;
			}
			#item-details .item-content {
				font-weight: normal;
				color: #333;
			}
				#item-details .item-content p + p {
					margin-top: 1em;
				}
				#item-details .item-content a {
					display: inline;
					color: #00f;
				}
					#item-details .item-content a.active {
						color: #f00;
						text-decoration: underline;
						background: transparent none;
					}
		</style>
    </head>
    <body>
		<div id="jqt">
			<div id="home" selected="true" class="current">
				<div class="toolbar">
					<h1>Lilina</h1>
					<a href="#info" class="button">Info</a>
				</div>
				<ul class="rounded">
					<li class="arrow"><a href="#latest">Latest</a></li>
					<li class="arrow" id="feeds-link"><a href="#feeds">Feeds</a> <small class="counter">&hellip;</small></li>
				</ul>
				<div class="info">
					Powered by <a href="http://getlilina.org/" target="_blank">Lilina</a> and the Phone plugin.
				</div>
			</div>
			<div id="latest">
				<div class="toolbar">
					<h1>Latest</h1>
					<a href="#" class="back">Back</a>
				</div>
                <ul class="edgetoedge" id="items-list">
                    <li>Loading items&hellip;</li>
                </ul>
				<div class="info">
					<p id="load-more"><strong>Tap to load more.</strong></p>
				</div>
			</div>
            <div id="item-view" class="edgetoedge">
				<div class="toolbar">
					<h1>Item</h1>
					<a class="back" href="#">Items</a>
				</div>
				<div id="item-details">
					<ul class="rounded">
						<li class="item-source">From: <a href="http://getlilina.org/" target="_blank">Feed Name</a></li>
						<li class="item-title"><a href="http://getlilina.org/">Item Title</a></li>
						<li class="item-date"><abbr>5 minutes ago</abbr></li>
						<li class="item-content">Text</li>
					</ul>
				</div>
            </div>
			<div id="feeds">
				<div class="toolbar">
					<h1>Latest</h1>
					<a href="#" class="back">Back</a>
				</div>
                <ul class="edgetoedge" id="feeds-list">
                    <li>Loading items&hellip;</li>
                </ul>
			</div>
			
			<div id="ui" class="edit">
				<form>
					<div class="toolbar">
						<h1>New Todo</h1>
						<a href="#" class="btn2 goback">Cancel</a>
					</div>
					<ul class="rounded">
						<li><input type="range" id="todo" placeholder="Enter your todo..." /></li>
						<!-- <li><textarea id="description" placeholder="Descripton"></textarea></li> -->
					</ul>
					<a href="#" class="whiteButton" style="margin: 10px">Add</a>
				</form>
			</div>
		</div>
    </body>
</html>
<?php
	}
	public static function register(&$controller) {
		$controller->registerMethod('phone', array('Phone', 'dispatch'));
	}
}

add_action('controller-register', array('Phone', 'register'), 10, 1);